<template>
  <div class="message">
    <fx-card title="基础用法">
      <fx-button @click="baseClick">打开消息</fx-button>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="不同状态">
      <fx-button class="mr20" @click="typeClick('success')" type="success" plain>成功</fx-button>
      <fx-button class="mr20" @click="typeClick('warning')" type="warning" plain>警告</fx-button>
      <fx-button class="mr20" @click="typeClick('primary')" type="primary" plain>基本</fx-button>
      <fx-button class="mr20" @click="typeClick('error')" type="error" plain>错误</fx-button>
      <template #hide>
        <pre v-highlight="type"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="手动关闭 同时将消息消失时间设置为 0">
      <fx-button class="mr20" @click="closeClick('success')" type="success">成功</fx-button>
      <fx-button class="mr20" @click="closeClick('warning')" type="warning">警告</fx-button>
      <fx-button class="mr20" @click="closeClick('primary')" type="primary">基本</fx-button>
      <fx-button class="mr20" @click="closeClick('error')" type="error">错误</fx-button>
      <template #hide>
        <pre v-highlight="close"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="文字居中">
      <fx-button class="mr20" @click="textClick">文字居中</fx-button>
      <template #hide>
        <pre v-highlight="text"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="距离顶部距离">
      <fx-input-number v-model="offsetInput" width="120" :min="10" :max="700"></fx-input-number>
      <fx-button class="ml20" @click="offsetClick">距离顶部</fx-button>
      <template #hide>
        <pre v-highlight="offset"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="设置消失时间 设置为零时将不会关闭">
      <fx-input-number v-model="durationInput" width="120" :min="0" :max="50000" :step="500"></fx-input-number>
      <fx-button class="ml20" @click="durationClick">设置消失时间</fx-button>
      <template #hide>
        <pre v-highlight="duration"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="使用 HTML 片段">
      <fx-button @click="htmlClick(true)" class="mr20">使用 HTML 片段</fx-button>
      <fx-button @click="htmlClick(false)">不使用 HTML 片段</fx-button>
      <template #hide>
        <pre v-highlight="html"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="固定位置,不会下移">
      <fx-button @click="fixedClick" class="mr20">固定位置</fx-button>
      <template #hide>
        <pre v-highlight="fixed"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FxMessage } from '@/base'

export default defineComponent({
  name: 'message',
  setup () {
    const baseClick = () => {
      FxMessage('这是一条消息!')
    }
    const typeClick = (type: 'primary' | 'success' | 'warning' | 'error'): void => {
      FxMessage({
        message: '这是一条消息!',
        type
      })
    }
    const closeClick = (type: 'primary' | 'success' | 'warning' | 'error'): void => {
      FxMessage({
        message: '这是一条消息!',
        showClose: true,
        duration: 0,
        type
      })
    }
    const textClick = (): void => {
      FxMessage({
        message: '这是一条消息!',
        center: true
      })
    }
    const offsetInput = ref<number>(10)
    const offsetClick = (): void => {
      FxMessage({
        message: '这是一条消息!',
        offset: offsetInput.value
      })
    }
    const durationInput = ref<number>(1000)
    const durationClick = (): void => {
      FxMessage({
        message: '这是一条消息!',
        duration: durationInput.value,
        showClose: durationInput.value === 0
      })
    }

    const htmlClick = (isHTML: boolean): void => {
      FxMessage({
        message: '<span>这是一条<em style="color: red">HTML</em>消息</span>',
        isHTML: isHTML
      })
    }

    const fixedClick = (): void => {
      FxMessage({
        message: '文字不位移',
        isFixed: true
      })
    }

    const base = `<fx-button @click="baseClick">打开消息</fx-button>

export default defineComponent({
  const baseClick = () => {
        FxMessage('这是一条消息!')
  }
})`

    const type = `<fx-button class="mr20" @click="typeClick('success')" type="success" plain>成功</fx-button>
<fx-button class="mr20" @click="typeClick('warning')" type="warning" plain>警告</fx-button>
<fx-button class="mr20" @click="typeClick('primary')" type="primary" plain>基本</fx-button>
<fx-button class="mr20" @click="typeClick('error')" type="error" plain>错误</fx-button>

export default defineComponent({
  const typeClick = (type: 'primary' | 'success' | 'warning' | 'error') => {
    FxMessage({ message: '这是一条消息!', type })
  }
})`

    const close = `<fx-button class="mr20" @click="closeClick('success')" type="success">成功</fx-button>
<fx-button class="mr20" @click="closeClick('warning')" type="warning">警告</fx-button>
<fx-button class="mr20" @click="closeClick('primary')" type="primary">基本</fx-button>
<fx-button class="mr20" @click="closeClick('error')" type="error">错误</fx-button>

export default defineComponent({
  const closeClick = (type: 'primary' | 'success' | 'warning' | 'error') => {
    FxMessage({ message: '这是一条消息!', showClose: true, duration: 0, type })
  }
})`

    const text = `<fx-button class="mr20" @click="textClick">文字居中</fx-button>

export default defineComponent({
  const textClick = (): void => {
    FxMessage({ message: '这是一条消息!', center: true })
  }
})`

    const offset = `<fx-input-number v-model="offsetInput" width="120" :min="10" :max="700"></fx-input-number>
<fx-button class="ml20" @click="offsetClick">距离顶部</fx-button>

export default defineComponent({
  const offsetInput = ref<number>(10)
  const offsetClick = (): void => {
    FxMessage({ message: '这是一条消息!', offset: offsetInput.value })
  }
})`

    const duration = `<fx-input-number v-model="durationInput" width="120" :min="0" :max="50000" :step="500"></fx-input-number>
<fx-button class="ml20" @click="durationClick">设置消失时间</fx-button>

export default defineComponent({
  const durationInput = ref<number>(1000)
  const durationClick = (): void => {
    FxMessage({ message: '这是一条消息!', duration: durationInput.value, showClose: durationInput.value === 0 })
  }
})`

    const html = `<fx-button @click="htmlClick(true)" class="mr20">使用 HTML 片段</fx-button>
<fx-button @click="htmlClick(false)">不使用 HTML 片段</fx-button>

export default defineComponent({
  const htmlClick = (isHTML: boolean): void => {
    FxMessage({ message: '<span>这是一条<em style="color: red">HTML</em>消息</span>', isHTML: isHTML })
  }
})`

    const fixed = `<fx-button @click="fixedClick" class="mr20">固定位置</fx-button>

export default defineComponent({
  const fixedClick = (): void => {
    FxMessage({
      message: '文字不位移',
      isFixed: true
    })
  }
})`

    return {
      baseClick,
      typeClick,
      closeClick,
      textClick,
      offsetClick,
      durationClick,
      htmlClick,
      fixedClick,
      base,
      type,
      close,
      text,
      offsetInput,
      offset,
      durationInput,
      duration,
      html,
      fixed
    }
  }
})
</script>

<style scoped lang="scss">
.message {
}
</style>
